<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="root">
    <div id="mealList" style="height: 100px;background-color: red;overflow-y: scroll;"  onscroll="scrollFunction(this)">
        <div>
            111111
        </div>
        <div>
            111111
        </div>
        <div>
            111111
        </div>
        <div>
            111111
        </div>
        <div>
            111111
        </div>
        <div>
            111111
        </div>
        <div>
            111111
        </div>
        <div>
            111111
        </div>
        <div>
            111111
        </div> 
    </div>
</div>
<script type="text/javascript">
        var page = 1;// 页码
        var limit = 20;// 每页的记录条数
        var count = 0;//总记录数
		//页面滚动事件
		function scrollFunction(elem){
            // var scrollTop = elem.scrollTop;
			// var windowHeight = elem.clientHeight;
		    // var scrollHeight = elem.scrollHeight;
            // // 检查是否滚动到底部
            // if ((scrollTop + windowHeight) >= scrollHeight) {
            //     console.log("到底部了");
            // } else {
            //     console.log("滚动中，scrollTop: " + scrollTop);
            // }
		}

        $("#mealList").on("scroll", function () {
            //表示内容已经向上滚动了多少像素  也就是多出的高度
            var scrollTop = $(this)[0].scrollTop;
            //clientHeight 表示元素的可视区域高度，不包括被隐藏的滚动部分  也就是默认div(id="mealList")高度
            var windowHeight = $(this)[0].clientHeight;
            //scrollHeight 表示元素内容的总高度
            var scrollHeight = $(this)[0].scrollHeight;
            if ((scrollTop + windowHeight) == scrollHeight ) {
                console.log("到底部了")
            }
            if ((scrollTop + windowHeight) == scrollHeight && moreFlag) {
            //parseInt(count)/limit最大页数
	    	if(page > parseInt(count)/limit){
		  		return ;
	  		}else{
	  			page++;
	  		}
		}
	    });
</script>
</body>
</html>